<html>
<head>
<style type="text/css">
    video {
        border: 1px solid #333;
    }

    table, td {
        border: 1px solid #333;
        border-collapse: collapse;
    }

    thead, tfoot {
        background-color: #333333;
        color: #ffffff;
    }

    .horizontal > * {
        display: inline-block;
    }
</style>
</head>
<body>
    <div class=horizontal>
        <table>
            <thead>
                <tr>
                    <th colspan="2">Metadata</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>ID</td>
                    <td id=id>null</td>
                </tr>
                <tr>
                    <td>Is Selected</td>
                    <td id=selected>false</td>
                </tr>
                <tr>
                    <td>Width</td>
                    <td id=width>0px</td>
                </tr>
                <tr>
                    <td>Height</td>
                    <td id=height>0px</td>
                </tr>
            </tbody>
        </table>

        <table>
            <thead>
                <tr>
                    <th colspan="2">Playback State</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Current Time</td>
                    <td id=time>0.00 seconds</td>
                </tr>
                <tr>
                    <td>Duration</td>
                    <td id=duration>0.00 seconds</td>
                </tr>
                <tr>
                    <td>Play State</td>
                    <td id=state>paused</td>
                </tr>
                <tr>
                    <td>Ended</td>
                    <td id=ended>false</td>
                </tr>
            </tbody>
        </table>

        <fieldset>
            <legend>Select a video playback option:</legend>
            <div>
              <input type=radio id=option-default value=default name=options>
              <label for=option-default>Default</label>
            </div>
            <div>
              <input type=radio id=option-autoplay value=autoplay name=options>
              <label for=option-autoplay>Autoplay</label>
            </div>
            <div>
              <input type=radio id=option-poster value=poster name=options>
              <label for=option-poster>Poster</label>
            </div>
        </fieldset>
    </div>

    <br />

    <video id=video controls src="../../../home/anon/Videos/test-webm.webm"></video>

    <script type="text/javascript">
        let video = document.getElementById('video');

        const params = new URLSearchParams(document.location.search);
        const option = params.get('option');

        if (option === 'autoplay') {
            document.getElementById('option-autoplay').setAttribute('checked', '');
            video.setAttribute('autoplay', '');
        } else if (option === 'poster') {
            document.getElementById('option-poster').setAttribute('checked', '');
            video.setAttribute('poster', '../../wallpapers/grid.png');
        } else {
            document.getElementById('option-default').setAttribute('checked', '');
        }

        video.videoTracks.onaddtrack = (event) => {
            document.getElementById('id').textContent = event.track.id;
            document.getElementById('selected').textContent = event.track.selected;
        };

        video.addEventListener('timeupdate', () => {
            document.getElementById('time').textContent = `${video.currentTime.toFixed(2)} seconds`;
        });

        video.addEventListener('durationchange', () => {
            document.getElementById('duration').textContent = `${video.duration.toFixed(2)} seconds`;
        });

        video.addEventListener('loadedmetadata', () => {
            document.getElementById('width').textContent = `${video.videoWidth}px`;
            document.getElementById('height').textContent = `${video.videoHeight}px`;
        });

        video.addEventListener('playing', () => {
            document.getElementById('state').textContent = 'playing';
            document.getElementById('ended').textContent = video.ended;
        });
        video.addEventListener('waiting', () => {
            document.getElementById('state').textContent = 'waiting';
            document.getElementById('ended').textContent = video.ended;
        });
        video.addEventListener('pause', () => {
            document.getElementById('state').textContent = 'paused';
            document.getElementById('ended').textContent = video.ended;
        });

        for (const option of document.getElementsByName('options')) {
            option.addEventListener('change', function() {
                if (!this.checked) {
                    return;
                }

                const location = `${window.location.pathname}?option=${this.value}`;
                window.location.href = location;
            });
        }
    </script>
</body>
</html>
